/*
 * 基于ueditor的富文本编辑器组件
 * @Author: ice
 * @Date: 2018-10-24 17:26:07
 * @Last Modified by: ice
 * @Last Modified time: 2018-10-25 11:48:44
 */
<template>
    <vue-editor
        id="editor"
        :editor-options="editorSettings"
        use-custom-image-handler
        :editor-toolbar="toolbar"
        v-model="content"
        :placeholder="placeholder"
        @imageAdded="handleImageAdded"
        @text-change="fnChange()"
        @blur="fnBlur()"/>
</template>

<script>
import { VueEditor, Quill } from 'vue2-editor';
import { ImageDrop } from 'quill-image-drop-module';
import ImageResize from 'quill-image-resize-module';

Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);
export default {
    name: 'UE',
    components: {
        VueEditor
    },
    data() {
        return {
            editorSettings: {
                modules: {
                    imageDrop: true,
                    imageResize: {}
                }
            }
        };
    },
    props: {
        value: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: '请输入内容',
        },
        toolbar: {
            type: Array,
            default: () => {
                return [['bold', 'italic', 'underline', 'strike', 'blockquote',{ 'color': [] }, { 'background': [] },{ 'size': ['small', false, 'large', 'huge'] }, { 'header': [1, 2, 3, 4, 5, 6, false] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'align': [] }, { 'direction': 'rtl' }],
                    ['image', 'clean']];
            }
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        content: {
            set(val){
                this.$emit('input', val);
            },
            get(){
                return this.value;
            }
        }
    },
    methods: {
        handleImageAdded: function(file, Editor, cursorLocation, resetUploader) {
            console.log('fdfds');

            var formData = new FormData();

            formData.append('file', file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: formData,
                success: resp => {
                    if (resp.code == 1) {
                        // 调用组件成功回调,修改样式
                        let url = resp.data.url; // Get url from response

                        Editor.insertEmbed(cursorLocation, 'image', url);
                        resetUploader();
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                    }
                }
            });
        },
        fnChange(){
            this.$emit('change', this.value);
        },
        fnBlur(){
            this.$emit('blur');
        }
    },
};

</script>

<style lang="less" scoped></style>